<template>
	<BaseContainer
		class="report-table-wrapper"
		v-loading="loading"
		element-loading-text="加载中..."
		element-loading-background="rgba(255, 255, 255, 0.8)"
	>
		<div class="t-header">
			<div class="article-title" >
				<p class="text-tip" v-if="!otherData?.allData" @click="handleShowRoll" v-show="params" id="no-print" :style="{ opacity: 1, '--base-text-bg': '#dc8844af' }">
					<span class="tip-text-new">名单</span>
				</p>
				<span>南京市喘息服务补贴核算人员统计表</span>
			</div>
			<p class="text-sm">
				（所属月份）： <span class="text-underline">{{ model.year }}</span
				>年<span class="text-underline">{{ model.month }}</span> 月
			</p>
		</div>
		<div class="flex gap-20">
			<div style="min-width: 140px">填报单位（盖章）：{{ modelData.organizationName }}</div>
			<div>填报时间：{{ modelData.fillingTime }}</div>
		</div>
		<ReportTable :column="dataList" :isDetail="true" :baseModel="baseModel" :model="modelData" @change="handleSave"> </ReportTable>
		<div style="display: flex;margin-top: 10px;">
			填表人：
			<el-input style="width: 100px;" v-if="!isDetail" v-model="modelData.preparer"  @blur="handleSave"></el-input>
			<p v-else>{{ modelData.preparer }}</p>
		</div>

		<el-drawer size="65%" append-to-body v-model="drawer" :with-header="false" @close="handleClose">
			<PantStatistics v-if="drawer" :isCondition="isCondition" :nowRowData="model" :actionBtn="false" />
		</el-drawer>
	</BaseContainer>
</template>

<script setup lang="ts">
import ReportTable from '../ReportTable/index.vue'
import apiMod from '@/apiMod'
import PantStatistics from './PantStatistics/index.vue'

const props = defineProps<{
	otherData?: any
	params?: any
	creditCode?: string | number
	editData?: any
	isDetail?: boolean
	caseId?: string | number
	custome?: boolean
	approvalStatus?: string | number
}>()
const emit = defineEmits(['save'])

const model = ref({
	year: '',
	month: '',
	creditCode: props.creditCode,
})
const baseModel = shallowRef({})
const loading = ref(false)
const modelData: any = ref({})

const drawer = ref(false)
const isCondition = ref(false)

const handleShowRoll = () => {
	drawer.value = true
}
const handleClose = () => {
	getInitData()
}
const tableColumnConfig = (data?: any) => {
	return new Promise((resovle) => {
		const pantList = data?.pantServiceObjectStatisticsVOList || {}
		const tempList = Array.from(pantList).map((item: any, index) => {
			return [
				{
					m: index + 1,
				},
				{
					m: item.name,
				},
				{
					m: item.idCard,
				},
				{
					m: item.address,
				},
				{
					m: item.pantStartTime,
				},
				{
					m: item.pantEndTime,
				},
				{
					m: item.phone,
				},
			]
		})
		const config = [
			[
				{
					m: '序号',
					bl: 1,
					fs: 16,
				},
				{
					m: '姓名',
					bl: 1,
					fs: 16,
				},
				{
					m: '身份证号码',
					bl: 1,
					fs: 16,
				},
				{
					m: '家庭地址',
					bl: 1,
					fs: 16,
				},
				{
					m: '喘息服务起始日期',
					bl: 1,
					fs: 16,
				},
				{
					m: '喘息服务终止日期',
					bl: 1,
					fs: 16,
				},
				{
					m: '家属电话',
					bl: 1,
					fs: 16,
				},
			],
			...tempList,
			[
				{
					m: `合计人数：${data.total || ''} 人`,
					align: 'left',
					mc: {
						rs: 1,
						cs: 10,
					},
				},
			],
		]
		resovle(config)
	})
}

const dataList = ref([]) as any

tableColumnConfig({}).then((config: any) => {
	dataList.value = config
})
const getInitData = async () => {
	const params = props.params || {}
	const query = {
		year: '',
		month: '',
		creditCode: props.creditCode,
		projectId: props.params.subsidyProjectId,
	}
	if (params.belongDate) {
		query.year = params.belongDate.replace('年', '-').replace('月', '').split('-')[0]
		query.month = params.belongDate.replace('年', '-').replace('月', '').split('-')[1]
		model.value.year = query.year
		model.value.month = query.month
	} else {
		return
	}

	try {
		const condition = (props.caseId && props.isDetail) || props.custome || props.approvalStatus == -2
    isCondition.value = condition
		loading.value = true
		modelData.value = props.editData
		if (!condition) {
			const result1 = await apiMod.view_pant_statistics(query).then((res) => res.data || {})
			const reportData = await apiMod.view_serviceObjectPantStatistics_list(query).then((res) => res.data || {})
			modelData.value = {
				...result1,
				pantServiceObjectStatisticsVOList: reportData,
				total: reportData.length || result1.total,
				preparer:props.editData.preparer || result1.preparer
			}
      handleSave()
		}
		loading.value = false
		tableColumnConfig(modelData.value).then((config) => {
			dataList.value = config
		})
	} catch (error) {
		loading.value = false
	}
}
onMounted(() => {
	if (props.params) getInitData()
})

const handleSave = () => {
	emit('save', modelData.value, 'report_1005', props.editData)
}

onUnmounted(() => {})
</script>

<style scoped lang="scss">
.text-underline {
	text-decoration: underline;
	padding: 0 6px;
}
.report-table-wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 10px 30px;
	top: 0;

	.t-header {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		padding: 15px 0;

		.text-sm {
			font-weight: 400;
			font-size: 16px;
		}
	}
}

.article-title {
	position: relative;
	z-index: 0;
	width: 63%;
	margin: 0 auto;
}

.text-tip {
	--base-text-bg: rgb(56 176 255 / 13%);
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--base-text-bg);
	padding: 4px;
	z-index: -1;
	&:hover {
		cursor: pointer;
	}
	.tip-text-new {
		position: absolute;
		right: 0;
		top: -10px;
		color: #fff;
		border-radius: 4px;
		padding: 2px;
		width: 40px;
		background-color: #ed6d05;
	}
	.tip-text-detail {
		background-color: #179fe3;
		position: absolute;
		right: 0;
		top: -10px;
		color: #fff;
		border-radius: 4px;
		padding: 2px;
		width: 40px;
	}
}
</style>
